<template>
    <div class="content">
        <SearchTitle />
        <div class="CenterBox">
            <div class="fhanBox" @click="fanhuifun">&lt;返回</div>
            <el-card>
                <div class="jrxqBox">
                    <div class="jrxqBoxLeft">
                        <img style="width: 100%;" :src="store.imgfengMian + formData.fengmian" alt="">
                    </div>
                    <div class="jrxqBoxRight">
                        <div class="TitleBox">{{formData.org_name}} - {{ formData.name }}</div>
                        <div class="jrxqBoxRightNrBox">
                            <div class="jrlistRightTextFor">
                                <div class="jrlistRightsjzs" style="color: #EF1F1F;">
                                    <span class="shujuBox">{{formData.base_rate_min}}-{{ formData.base_rate_max }}</span>
                                    <span class="dwBox">%</span>
                                </div>
                                <div class="jrlistRightdbwz">参考利率范围</div>
                            </div>
                            <div class="jrxqShuxian"></div>
                            <div class="jrlistRightTextFor">
                                <div class="jrlistRightsjzs">
                                    <span class="shujuBox">{{ formData.loan_limit }}</span>
                                    <span class="dwBox">万</span>
                                </div>
                                <div class="jrlistRightdbwz">贷款额度</div>
                            </div>
                            <div class="jrxqShuxian"></div>
                            <div class="jrlistRightTextFor">
                                <div class="jrlistRightsjzs">
                                    <span class="shujuBox">{{ formData.loan_term }}</span>
                                    <span class="dwBox">个月</span>
                                </div>
                                <div class="jrlistRightdbwz">贷款期限</div>
                            </div>
                            <div class="jrxqShuxian"></div>
                            <div class="jrlistRightTextFor">
                                <div class="jrlistRightsjzs">
                                    <span class="shujuBox">{{ formData.guarantee_mode }}</span>
                                </div>
                                <div class="jrlistRightdbwz">担保方式</div>
                            </div>
                        </div>
                    </div>
                </div>
            </el-card>
            <el-card style="margin-top: 20px;">
                <template #header>
                    <div class="jrxqNrTopText">产品介绍</div>
                </template>
                <div class="jrxqNrBox">
                    <div class="jrxqNrlabel">产品类型:</div>
                    <div class="jrxqNrText">{{ formData.type }}</div>
                </div>
                <div class="jrxqNrBox">
                    <div class="jrxqNrlabel">产品简介:</div>
                    <div class="jrxqNrText">{{ formData.description }}</div>
                </div>
                <div class="jrxqNrBox">
                    <div class="jrxqNrlabel">申请条件:</div>
                    <div class="jrxqNrText">{{ formData.apply_conditions }}</div>
                </div>
                <div class="jrxqNrBox">
                    <div class="jrxqNrlabel">申请材料:</div>
                    <div class="jrxqNrText">{{ formData.apply_materials }}</div>
                </div>
            </el-card>
        </div>
    </div>
</template>
<script setup>
import { ref, onMounted } from 'vue';
import SearchTitle from '@/components/general/SearchTitle.vue';
import { lcFinancialProductInfosDWGet } from '@/api/api.js'
import { useRoute, useRouter } from 'vue-router';
const router = useRouter();
const route = useRoute();
import { useStore } from '@/store/store';
const store = useStore();

onMounted(() => {
    lcFinancialProductInfosDWGetfun()
})
// 详情数据
const formData = ref({});
const lcFinancialProductInfosDWGetfun = async () => {
    const res = await lcFinancialProductInfosDWGet({ id: route.query.id });
    formData.value = res.result;
}
// 返回
const fanhuifun = () => {
    router.go(-1);
};
</script>
<style scoped lang="scss">
.content {
    width: 100%;
    height: 100%;
    padding-bottom: 60px;
    // min-height: calc(100vh - 60px);
    min-height: 100vh;
    background-size: 100%;
    background-color: #f3f9fe;
}

.fhanBox {
    font-size: 16px;
    color: #767879;
    margin: 10px 0;
    cursor: pointer;

    &:hover {
        color: $green-color;
    }
}

.jrxqBox {
    display: flex;

    .jrxqBoxLeft {
        width: 220px;
        height: 220px;
        border: 2px solid #D9D9D9;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    .jrxqBoxRight {
        width: calc(100% - 200px);
        margin-left: 20px;
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        .TitleBox {
            font-weight: bold;
            font-size: 30px;
            color: #333333;
        }

        .jrxqBoxRightNrBox {
            background: #F9F9F9;
            border-radius: 4px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 20px 60px;

            .jrlistRightTextFor {
                .jrlistRightsjzs {
                    color: #333333;

                    .shujuBox {
                        font-weight: bold;
                        font-size: 22px;
                    }

                    .dwBox {
                        font-size: 14px;
                    }
                }

                .jrlistRightdbwz {
                    font-size: 16px;
                    color: #545454;
                }
            }

            .jrxqShuxian {
                width: 1px;
                height: 24px;
                background: #D9D9D9;
            }
        }
    }
}

.jrxqNrTopText {
    font-size: 16px;
    color: #333333;
}

.jrxqNrBox {
    display: flex;
    font-size: 14px;
    margin: 20px 0;

    .jrxqNrlabel {
        margin-right: 10px;
        color: #545454;
        flex-shrink: 0;
    }

    .jrxqNrText {
        color: #333333;
    }
}
</style>